<template>
  <div class="wrapper">
       <div class="content">
         <header>
              <PageHeader></PageHeader>
         </header>
         <footer>
              <h2>推广总揽(人)</h2>
              <div class="chart">
                    <PiceEchart :level='levelZ'></PiceEchart>
                    <PiceEchart :level='levelB'></PiceEchart>
                    <PiceEchart :level='levelH'></PiceEchart>
                    <PiceEchart :level='levelO'></PiceEchart>
              </div>
         </footer>
       </div>
  </div>
</template>

<script>
import PageHeader from '@/components/CounterHeader/header'
import PiceEchart from '@/components/PiceEchart/pieEchart'

export default {
  components:{
    PageHeader,
    PiceEchart
  },
  data () {
    return {
        levelZ:{
            name:'钻石会员',
            color:[ 'rgba(0, 160, 255, 1)', 'rgba(63, 196, 255, 1)'],
            count:999,
            zhitui:{
              background:"rgba(0, 160, 255, 1)"
            },
            jiantui:{
              background:"rgba(63, 196, 255, 1)"
            }
        },
        levelH:{
              name:'黄金会员',
              color:[ 'rgba(59, 181, 80, 1)', 'rgba(36, 224, 20, 1)'],
              count:999,
              zhitui:{
                background:"rgba(59, 181, 80, 1)"
              },
              jiantui:{
                background:"rgba(36, 224, 20, 1)"
              }
        },
        levelB:{
              name:'白金会员',
              color:[ 'rgba(227, 146, 0, 1)', 'rgba(218, 203, 0, 1)'],
              count:2222,
              zhitui:{
                background:"rgba(227, 146, 0, 1)"
              },
              jiantui:{
                background:"rgba(218, 203, 0, 1)"
              }
        },
        levelO:{
            name:'普通会员',
            color:[ 'rgba(44, 110, 255, 1)', 'rgba(69, 17, 190, 1)'],
            count:999,
            zhitui:{
                background:"rgba(44, 110, 255, 1)"
            },
            jiantui:{
                background:"rgba(69, 17, 190, 1)"
            }
        }
    }
  },
  
   methods: {

   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrapper {
   height: 100%;
   padding: 45px 60px 45px 40px;
   box-sizing: border-box;
}
.content {
   height: 100%;
}
header {
  height: 40%;
  width: 100%;
  background:url('../assets/header2.png') no-repeat;
  background-size: 100% 100%;
}
footer {
  margin-left: 15px;
  margin-top: 25px;
  height: 60%;
  background: url('../assets/tujian2x.png') no-repeat;
  background-size: 100% 100%;
  padding: 30px 40px 20px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
h2 {
    color: aliceblue;
    padding-left: 30px;
}
.echart-content {
   flex: 1;
   /* background: red; */
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
}
.chart {
    height: 100%;
    width:100%;
    display: flex;
    flex-direction: row;
    padding-left: 30px;
    box-sizing: border-box;
}
</style>
